<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="sytle.css">
  <script src="../template.js"></script>
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="date container">
  <div class="title clearfix">
    <div class="titleL"><a>上一月</a></div>
    <div class="titleM"></div>
    <div class="titleR"><a>下一月</a></div>
  </div>
  <ul class="weekday list-inline"></ul>
  <ul class="date-days list-inline"></ul>
</div>
</body>
<script type="text/html" id="date-days">
  {{each list as value}}
  <li>{{value}}</li>
  {{/each}}
</script>
<script>
  var d = new Date();
  var dates = function (month) {
    $(".titleM").html(d.getFullYear() + "年" + month + "月");
    var daysArr = [];
    var days, i, j;
    if ([2].indexOf(month) != -1) {
      days = 28;
    }
    else if ([4, 6, 9, 11].indexOf(month) != -1) {
      days = 30;
    }
    else {
      days = 31;
    }
    for (i = 0; i < days; i++) {
      daysArr.push(i + 1);
    }
    d.setDate(1);
    var idx = d.getDay();
    for (j = 0; j < idx; j++) {
      daysArr.unshift("");
    }
    $(".date-days").html(
      template("date-days", {
        list: daysArr
      })
    );
  }
  $(".weekday").html(
    template("date-days", {
      list: ["日", "一", "二", "三", "四", "五", "六"]
    })
  );
  dates(d.getMonth() + 1);
  $(".titleL").on("click",function(){
    dates(d.getMonth());
  });
</script>
</html>